<template>
  <div>
    <h1>store中的count:{{ count }}</h1>
    <h1>count的平方{{ countSqrt }}</h1>
    <h1>store中的num:{{ num }}</h1>

    <button @click="increaseN({ n: 20 })">+n</button>
    <button @click="increase">+1</button>

    <!-- action -->

    <button @click="increaseWait">过一秒+1</button>
    <button @click="increaseNWait({ n: 20 })">过一秒+N</button>

    <!-- getter -->
  </div>
</template>

<script>
  export default {
    name: "Item",
    mounted() {
      console.log(this);
    },
    computed: {
      count() {
        return this.$store.state.Item.count;
      },
      num() {
        return this.$store.state.Item.num;
      },
      countSqrt() {
        return this.$store.getters["Item/countSqrt"];
      },
    },
    methods: {
      increase() {
        this.$store.commit("Item/increase");
      },
      increaseN(payload) {
        this.$store.commit("Item/increaseN", payload);
      },
      increaseWait() {
        this.$store.dispatch("Item/increaseWait");
      },
      increaseNWait(payload) {
        this.$store.dispatch("Item/increaseNWait", payload);
      },
    },
  };
</script>

<style></style>
